<template>
  <!-- NavBar -->
  <wd-navbar title="选择药品" left-text="" left-arrow @click-left="handleClickLeft" />
  <!-- 搜索框 -->
  <wd-search placeholder-left />
  <wd-notice-bar text="已优惠10元" prefix="warn-bold" class="NoticeBar" :scrollable="false" />
  <!-- 搜索内容 -->
  <view class="content">
    <view class="conten_left">
      <text>药品照片</text>
    </view>
    <view class="conten_center">
      <text>优赛明 维生素E乳</text>
      <view>
        <text class="prescription">处药方</text>
        <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
      </view>
      <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
    </view>
    <view class="conten_right" style="margin-right: 60rpx">
      <wd-input-number v-model="value" @change="handleChange1" />
    </view>
  </view>
  <view class="content">
    <view class="conten_left">
      <text>药品照片</text>
    </view>
    <view class="conten_center">
      <text>优赛明 维生素E乳</text>
      <view>
        <text class="prescription">处药方</text>
        <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
      </view>
      <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
    </view>
    <view class="conten_right" style="margin-right: 60rpx">
      <wd-input-number v-model="value" @change="handleChange1" />
    </view>
  </view>
  <view class="content">
    <view class="conten_left">
      <text>药品照片</text>
    </view>
    <view class="conten_center">
      <text>优赛明 维生素E乳</text>
      <view>
        <text class="prescription">处药方</text>
        <text style="margin-left: 10rpx; font-size: 28rpx; color: #979797">85ml</text>
      </view>
      <text style="font-size: 32rpx; font-weight: 600; color: #eb5757">￥ 25.00</text>
    </view>
    <view class="conten_right" style="margin-right: 60rpx">
      <wd-input-number v-model="value" @change="handleChange1" />
    </view>
  </view>
  <wd-status-tip image="search" tip="当前搜索无结果" />
  <!-- 最下方状态信息 -->
  <view class="bottom">
    <view class="bottom_left" style="display: flex; align-items: center">
      <wd-badge modelValue="1">
        <img
          src="@/static/icons/weixin.png"
          alt="图片加载失败"
          style="width: 84rpx; height: 84rpx"
        />
      </wd-badge>
      <text style="font-size: 48rpx; font-weight: 600">￥15.00</text>
    </view>
    <view class="bottom_right">
      <button
        style="
          width: 240rpx;
          height: 88rpx;
          margin-right: 60rpx;
          line-height: 88rpx;
          color: white;
          text-align: center;
          background-color: #16c2a3;
          border-radius: 44rpx;
        "
      >
        申请开方
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
function handleClickLeft() {
  uni.navigateBack();
}
const value = ref<number>(1);
function handleChange1({ value }: any) {
  console.log(value);
}
</script>

<style scoped>
.NoticeBar {
  position: fixed;
  bottom: 130rpx;
  width: 100%;
  text-align: center;
  border-radius: 0;
}

.bottom {
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750rpx;
  height: 130rpx;
  padding-right: 30rpx;
  padding-left: 30rpx;
  background-color: #ffffff;
}

.content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 750rpx;
  height: 213rpx;
  margin-right: 30rpx;
  margin-left: 30rpx;
}

.conten_left {
  width: 160rpx;
  height: 143rpx;
  background-color: #c4c4c4;
  border-radius: 4rpx;
}
.prescription {
  width: 96rpx;
  height: 40rpx;
  font-size: 24rpx;
  line-height: 40rpx;
  color: white;
  text-align: center;
  background: #16c2a3;
  border: 1px solid #16c2a3;
  border-radius: 2rpx;
}
</style>
